<template>
  <div class="modify_main">
		<div class="backGro" v-show="backChange">
			<a-spin size='large' :spinning='isloading'/>
		</div>
    <a-card :loading="loading" title="修改硒都简介">
      <a-textarea v-model:value="valuePlus" showCount />
			<a-button type="primary" @click="subSet">提交修改</a-button>
    </a-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { description ,setdescription} from "@/utils/fetch/api";
import { message } from 'ant-design-vue';
export default defineComponent({
  components: {},
  setup() {
    const valuePlus = ref<string>();

    const loading = ref<boolean>(false);

		const isloading = ref<boolean>(false)

    const refresh = async () => {
      loading.value = true;
      try {
        const data = await description();
        valuePlus.value = data.data;
      } catch (err) {
        console.error(err);
      }

      loading.value = false;
    };

		const subSet = async()=>{
			backChange.value = true
			isloading.value = true
			const params = {
				description:valuePlus.value
			}
			try{
				const data = await setdescription(params)
				message.success('修改简介成功！');
				isloading.value = false
				refresh()
			}catch(err){
				message.error('修改简介失败！');
				console.error(err)
			}finally{
				setTimeout(()=>{
					backChange.value = false
				},1500)
			}
		}

    onMounted(() => {
			refresh()
		});

		const backChange = ref<boolean>(false)
    return {
      valuePlus,
      loading,
			subSet,
			backChange,
			isloading
    };
  },
});
</script>

<style lang="less" scoped>
.modify_main{
	height: 100%;
	background: white;
	position: relative;
	.backGro{
		position: absolute;
		width: 100%;
		height: 100%;
		background: #0e0e0e42;
		z-index: 3;
		display: flex;
    align-items: center;
    justify-content: space-around;
		/deep/.ant-spin-dot{
			font-size: 4em;
		}
	}
}
/deep/.ant-card {
  .ant-card-head-title {
    font-size: 3em;
  }
  .ant-card-body {
    .ant-input {
      font-size: 2em;
      text-indent: 2em;
      min-height: 20em;
    }
  }
}
</style>
